$(function () {
    var form = layui.form

    // 1.调用接口，渲染表格数据
    function renderCateList() {
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 利用模板引擎渲染数据 
                var htmlStr = template('list-tpl', res)
                // 渲染到页面
                $('tbody').html(htmlStr)

            }
        })
    }
    renderCateList()

    // 2.给每个删除按钮绑定点击事件，删除数据
    $(document).on('click', '.del-btn', function () {
        console.log(123)

        // 2.1获取自定义属性 id 值
        var id = $(this).data('id')

        // 2.2 弹出询问框
        layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function (index) {
            //do something
            $.ajax({
                url: '/my/article/deletecate/' + id,
                method: 'GET',
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg('删除成功!')

                    // 重新渲染表格数据
                    renderCateList()
                }
            })

            layer.close(index);
        })
    })

    // 3.点击添加按钮，新增一条分类数据
    var index // 表示弹出层的索引标识
    // 3.1 绑定点击事件
    $('.add-btn').click(function () {
        // 3.2 弹出表单模态框
        index = layer.open({
            type: 1,
            title: '添加文章分类',
            // 弹出层内容： 提前定义一个模板
            content: $('#add-form-tpl').html(),
            // 宽高
            area: ['500px', '250px']
        })
    })

    // 3.3监听表单的提交事件
    $(document).on('submit', '#form-add', function (e) {
        e.preventDefault()

        $.ajax({
            url: '/my/article/addcates',
            method: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('添加成功!')

                renderCateList()
                layer.close(index)

            }
        })
    })

    // 4.点击编辑按钮，修改分类数据
    $(document).on('click', '.edit-btn', function () {
        // 4.2 弹出表单模态框
        index = layer.open({
            type: 1,
            title: '修改文章分类',
            // 弹出层内容： 提前定义一个模板
            content: $('#edit-form-tpl').html(),
            // 宽高
            area: ['500px', '250px']
        })

        // 4.3 获取自定义属性 id 值
        var id = $(this).data('id')


        $.ajax({
            url: '/my/article/cates/' + id,
            method: 'GET',
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 4.5 给表单赋值
                form.val('form-edit', res.data)
            }
        })
    })

    // 4.6 监听表单的提交事件
    $(document).on('submit', '#form-edit', function (e) {
        e.preventDefault()

        $.ajax({
            url: '/my/article/updatecate',
            method: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                // 提示用户
                layer.msg('更新信息成功!')
                // 关闭弹出层
                layer.close(index)
                // 重新传染表格数据
                renderCateList()

            }
        })
    })



















})















